<!-- 用户管理 -->
<!-- 用户管理 -->
<!-- 用户管理 -->

<template>
  <div>
    <myDivider name="用户管理"></myDivider>

    <!-- 顶部搜索 -->
    <div style="margin-left: 20px;">

      <el-input style="width: 140px;" v-model="keyAccount" clearable placeholder="根据账号查询"></el-input>
      <el-input style="width: 160px;" v-model="keyName" clearable placeholder="根据用户姓名查询"></el-input>
      <el-input style="width: 160px;" v-model="keyRoom" clearable placeholder="根据小区名称查询"></el-input>

      <el-select @change="SouSuo" style="width: 160px;" v-model="keyType" placeholder="请选择实名状态" clearable>
        <el-option label="未实名" value="0"></el-option>
        <el-option label="已实名" value="1"></el-option>
      </el-select>
      <el-button type="primary" @click="SouSuo">查询</el-button>
      <el-button @click="reset">重置</el-button>

      <div style="margin-top: 10px;">
        <el-button type="primary" @click="addClick">新增</el-button>
        <el-button icon="el-icon-files" @click="ToBatchImport">批量导入</el-button>
      </div>
    </div>

    <!-- 表格列表 -->
    <div>
      <el-table :data="tableData" style="width: 100%;margin-top: 50px">
        <el-table-column align="center" prop="account" label="用户账号" width="200">
        </el-table-column>
        <el-table-column align="center" prop="headPicture" label="头像" width="150">
          <template slot-scope="scope">
            <el-image v-if="scope.row.headPicture" style="width: 60px; height: 60px" :src="scope.row.headPicture"
              :preview-src-list="[scope.row.headPicture]">
            </el-image>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="nickName" label="昵称">
        </el-table-column>
        <el-table-column align="center" prop="name" label="姓名" width="150">
        </el-table-column>
        <el-table-column align="center" prop="gender" label="性别" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.gender == 0 ? '女' : '男' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="isIdentify" label="实名状态" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.isIdentify == 0 ? '未实名' : '已实名' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="createTime" label="注册时间" width="200">
        </el-table-column>
        <el-table-column align="center" label="操作" width="160">
          <template slot-scope="scope">
            <div class="textBtn">
              <el-row>
                <el-col class="el" :span="8">
                  <span style="color: #5fadff;cursor: pointer;font-weight: 600;"
                    @click="updateClick(scope.row)">编辑</span>
                </el-col>
                <el-col class="el" :span="8">
                  <span style="color: #5fadff;cursor: pointer;font-weight: 600;"
                    @click="detailClick(scope.row)">详情</span>
                </el-col>
                <!-- <el-col class="el" :span="8">
                  <span style="color: #5fadff;cursor: pointer;font-weight: 600;"
                    @click="deleteClick(scope.row)">删除</span>
                </el-col> -->
              </el-row>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="roomName" label="房间信息" width="200">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.roomName" placement="top-start">
              <span> {{
                scope.row.roomName.length > 8 ? '...' + scope.row.roomName.slice(scope.row.roomName.length - 8) :
                scope.row.roomName
              }}</span>
            </el-tooltip>
          </template> 
        </el-table-column> -->
      </el-table>
    </div>


    <!-- 所有弹窗 -->
    <el-dialog class="dialogStyle" :close-on-click-modal="false" width="500px"
      :title="popType == 'add' ? '新增账号' : '修改账号'" :visible.sync="popShow">
      <el-divider></el-divider>

      <el-form style="margin: 40px auto;width: 350px;" :model="ruleForm" :rules="rules" ref="ruleForm"
        label-width="80px">
        <el-form-item label="手机号：" prop="account">
          <el-input v-model="ruleForm.account"></el-input>
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <el-input v-model="ruleForm.password" type="text" class="pwd">
            <i style="cursor: pointer;" slot="suffix" class="el-icon-view" @click="hiddenPwd"></i>
          </el-input>
        </el-form-item>
      </el-form>

      <el-divider></el-divider>
      <div slot="footer" style="display: flex;justify-content: space-evenly;align-items: center;height: 60px;">
        <el-button @click="popShow = false">取 消</el-button>
        <el-button type="primary" @click="popOk">确
          定</el-button>
      </div>

    </el-dialog>


    <!-- 分页器 -->
    <myPagination :pageNum="pageNum" :total="total" @PageChange="PageChange" @pageSizeChange="pageSizeChange">
    </myPagination>
  </div>
</template>

<script>
import axios from 'axios'
export default {

  data() {
    var checkPhone = (rule, value, callback) => { // 手机号验证
      if (!value) {
        return callback(new Error('手机号不能为空'));
      } else {
        const reg = /^1[3456789]\d{9}$/
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error('请输入正确的手机号'));
        }
      }
    };

    return {


      // 筛选条件=============
      keyType: '',
      keyName: '',
      keyAccount: '',
      keyRoom: '',
      // =============筛选条件
      logOnUser: {},
      // 分页器
      total: 1,
      pageNum: 1,
      pageSize: 10,
      tableData: [],
      // 弹窗
      popType: 'add',
      popShow: false,
      showPwd: false,
      ruleForm: {},
      rules: {
        account: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: checkPhone, trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
      }
    }
  },
  async activated() {
    this.logOnUser = JSON.parse(sessionStorage.getItem('logOnUser'))
    this.reset()

  },
  deactivated() {

  },
  methods: {
    ToBatchImport() {
      this.$router.push('/batchImport?name=C端用户信息导入')
    },

    popOk() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          // this.ruleForm.account
          // this.ruleForm.password
          this.$confirm('是否提交?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async () => {
            if (this.popType == 'add') {
              let res = await this.$api.customer.myAppUserInsert({
                "account": this.ruleForm.account, //账号(手机号)
                "password": this.ruleForm.password //密码
              })
              if (res.code == 200) {
                this.popShow = false
                this.getTableList()
                this.$message({
                  type: 'success',
                  message: '新增成功!'
                });
              } else {
                this.$message.error(res.message)
              }
            }
            if (this.popType == 'update') {
              let res = await this.$api.customer.myAppUserUpdate({
                id: this.ruleForm.id,
                "account": this.ruleForm.account, //账号(手机号)
                "password": this.ruleForm.password //密码
              })
              if (res.code == 200) {
                this.popShow = false
                this.getTableList()
                this.$message({
                  type: 'success',
                  message: '修改成功!'
                });
              } else {
                this.$message.error(res.message)
              }
            }


          }).catch(() => {

          });
        } else {

        }
      });
    },
    addClick() {
      this.popType = 'add'
      this.popShow = true

      this.$set(this.ruleForm, 'account', '')
      this.$set(this.ruleForm, 'password', '')
      this.$nextTick(() => {
        this.$refs.ruleForm.clearValidate()
      })
    },
    async updateClick(row) {
      this.popType = 'update'
      this.popShow = true

      let res = await this.$api.customer.myGetAppUser(row.id)
      if (res.code == 200) {
        this.$set(this.ruleForm, 'id', res.data.id)
        this.$set(this.ruleForm, 'account', res.data.account)
        this.$set(this.ruleForm, 'password', res.data.password)
      } else {
        this.$message.error(res.message)
      }
      // 获取详情
      this.$nextTick(() => {
        this.$refs.ruleForm.clearValidate()
      })
    },
    detailClick(row) {
      this.$router.push(`/customerManag/Detail?id=${row.id}`)
    },
    deleteClick(row) {

      this.$confirm('此操作将永久删除该用户， 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await this.$api.customer.myDeleteLogic(row.id)
        if (res.code == 200) {
          this.getTableList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        } else {
          this.$message.error(res.message)
        }

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    async getTableList() { // 获取表格列表
      console.log(this.$api, 'this.$api.customer');
      let res = await this.$api.customer.myAppUserList({
        "unitType": this.logOnUser.unitType, //匹配当前登录用户  机关agency  机构company 系统system 必传
        "unitId": this.logOnUser.unitId, //单位id 系统传0
        "account": this.keyAccount, //账号
        "name": this.keyName, //用户姓名
        "residentialName": this.keyRoom, //小区名
        "isIdentify": this.keyType, //是否实名  0未实名 1已实名
        "pageSize": this.pageSize,
        "pageNum": this.pageNum
      })
      console.log(res, '列表数据');
      if (res.code == 200) {
        if (res.data.list.length < 1 && this.pageNum != 1) { //判断，当搜索关键字有内容时，我直接点击分页，会造成关键词列表中没有某某页的数据，那么我就用第一页重新请求一次
          this.pageNum = 1
          this.getTableList()
          return
        }
        this.tableData = res.data.list
        this.total = res.data.total
      } else {
        this.$message.error(res.message)
      }

    },
    SouSuo() {
      this.pageNum = 1
      this.getTableList()
    },
    reset() {
      this.keyAccount = ''
      this.keyName = ''
      this.keyRoom = ''
      this.keyType = ''
      this.pageNum = 1
      this.getTableList()
    },
    pageSizeChange(e) { //分页器——每页数量变化
      this.pageNum = 1
      this.pageSize = e
      this.getTableList()
    },
    PageChange(e) {//分页器——页数变化
      this.pageNum = e
      this.getTableList()
    },
    // 控制密码的显示与隐藏
    hiddenPwd() {
      this.showPwd = !this.showPwd // 默认为false
      if (this.showPwd) {
        document.getElementsByClassName('pwd')[0].style.webkitTextSecurity = 'none'
      } else {
        document.getElementsByClassName('pwd')[0].style.webkitTextSecurity = 'disc'
      }
    }
  },
}
</script>

<style lang="less" scoped>

.pwd {
  -webkit-text-security: disc;

  /deep/.el-input__suffix {
    -webkit-text-security: none;
  }
}

.dialogStyle {
  /deep/ .el-dialog {
    border-radius: 20px;

    .el-dialog__body {
      padding: 0 20px;

      .el-divider {
        margin: 20px 0;
      }
    }
  }
}

.textBtn {
  position: relative;

  /deep/ .el-row {
    display: flex;
    justify-content: center;
  }

  .el {
    display: block;
    position: relative;

    &:nth-child(n+2) {
      &::after {
        position: absolute;
        left: -1px;
        top: 50%;
        content: '';
        width: 2px;
        transform: translateY(-50%) scale(0.5, 1);
        height: 10px;
        background-color: #aaa;
      }
    }
  }
}
</style>